<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>已发布话题</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/index.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/index.js"></script>

    <script type="text/javascript" src="./verify.js"></script>
</head>

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">话题管理</a>
                <a>
                    <cite>话题列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="username" id="topic_content" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn"  lay-submit="" id="topic_search"><i class="layui-icon">&#xe615;</i></button>
                            </div>

                            <hr>
                            <blockquote class="layui-elem-quote">管理员可以直接创建话题,但是用户发布的话题必须要经过审核才能发布</blockquote>
                        </div>

                        <div class="layui-card-body ">
                            <!--                    话题数据表格的展示 -->
                            <table id="topic" lay-filter="topic"></table>
                        </div>



                    </div>
                </div>
            </div>
        </div>

        <script type="text/html" id="u_id">
            {{#  if(d.u_id ==-1) { }}
            <span><font color="red">管理员</font></span>
            {{#  } else { }}
            <span><font color="#32cd32">实名用户ID={{d.u_id}}</font></span>
            {{#  } }}
        </script>

        <script type="text/html" id="t_id">
            <input type="checkbox" name="lock" value="{{d.deleted}}" title="活跃" lay-filter="lockDemo" {{ d.deleted == 0 ? 'checked' : '' }}/>
        </script>

        <script type="text/html" id="toolbar">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除话题</a>
        </script>

        <script>
            //user相关的js代码实现
            layui.use(['table','form'], function() {
                var table = layui.table;
                var $ = layui.jquery;
                var form = layui.form;
                table.render({
                    elem: '#topic'
                    , height: 600
                    , url: 'topic/get_all_topics'
                    , method: 'post'
                    , where: {
                        'token': window.localStorage.managerToken
                    }
                    , cols: [
                        [ //表头
                            {field: 'id', title: 'ID', width: 200, sort: true, fixed: 'left'}
                            , {field: 'contents', title: '话题名称', width: 170}
                            , {field: 'u_id', title: '创建用户id',templet: '#u_id', width: 170}
                            , {field: 'u_name', title: '创建用户姓名', width: 170}
                            , {field: 'create_time', title: '创建时间', width: 170}
                            , {field: 'deleted', title: '活跃度',templet: '#t_id', width: 170}
                            , {fixed: 'right', title: '删除话题', toolbar: '#toolbar', width: 170}
                        ]
                    ]
                    , page: true //开启分页
                    , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
                    , limit: 5  //一页显示10条数据
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                        if (res.status === "token_error") {
                            window.location.assign("/")
                            return;
                        }

                        var result;
                        if (this.page.curr) {
                            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                        } else {
                            result = res.data.slice(0, this.limit);
                        }
                        return {
                            "code": 0, //解析接口状态
                            "msg": "ok", //解析提示文本
                            "count": res.data.length, //解析数据长度
                            "data": result //解析数据列表
                        };
                    }
                });

                //修改开关的状态
                //1:不选中
                //0:选中
                function checkStatus(flag,data)
                {
                    if(flag==0)
                    {
                        // 设置为原始状态（恢复状态）
                        data.elem.checked =true;
                        // 渲染方法1：渲染全部表单的checkbox
                        form.render('checkbox');
                    }
                    else if(flag==1)
                    {
                        // 设置为原始状态（恢复状态）
                        data.elem.checked =false;
                        // 渲染方法1：渲染全部表单的checkbox
                        form.render('checkbox');
                    }
                }


                form.on('checkbox(lockDemo)', function(obj){

                    var chose=obj.elem.checked;//判断当前状态

                  //用户id
                    var target=obj.elem.parentNode.parentNode.parentNode.childNodes[0].innerText;

                    //活跃
                    if(chose)
                    {
                        var index=layer.confirm('<font color=green>确认设置当前话题为活跃?</font>', {
                            btn: ['确认', '取消']
                            ,yes: function(index, layero){
                                //发送请求
                                $.ajax({
                                    url:'topic/set_topic_alive',
                                    type:'post',
                                    data:{"topic_id":target},
                                    success:function (res)
                                    {
                                        if(res.status==="handle_success")
                                        {
                                            layer.msg('成功', {icon: 1});
                                            return;
                                        }
                                        else if(res.status==="database_error")
                                        {
                                            //失败---没选中
                                            checkStatus(1,obj);
                                            layer.msg('数据库操作出现异常', {icon: 5});
                                            layer.close(index)
                                            return;
                                        }
                                        else {
                                            layer.msg('出现异常', {icon: 5});
                                            return;
                                        }
                                        //失败---没选中
                                        checkStatus(1,obj);
                                    }
                                    ,error:function ()
                                    {
                                        //失败---没选中
                                        checkStatus(1,obj);
                                        layer.msg('数据库操作出现异常', {icon: 5});
                                    }
                                })
                            },
                            btn2: function (index,layero)
                            {
                                //失败---没选中
                                checkStatus(1,obj);
                            },
                            cancel: function(index, layero){
                                //失败---没选中
                                checkStatus(1,obj);
                            }
                        });
                        layer.title("<font color=green>活跃度设置</font>",index)
                    }
                    else//设置当前话题为不活跃
                    {
                        var index=layer.confirm('<font color=red>确认设置当前话题为不活跃？</font>', {
                            btn: ['确认', '取消']
                            ,yes: function(index, layero){
                                //发送请求
                                $.ajax({
                                    url:'topic/set_topic_dead',
                                    type:'post',
                                    data:{"topic_id":target},
                                    success:function (res)
                                    {
                                        if(res.status==="handle_success")
                                        {
                                            layer.msg('成功', {icon: 1});
                                            layer.close(index)
                                            return;
                                        }
                                        checkStatus(0,obj);
                                        layer.msg('出现异常', {icon: 5});
                                    }
                                    ,error:function ()
                                    {
                                        checkStatus(0,obj);
                                        layer.msg('出现异常', {icon: 1});
                                    }
                                })
                            },
                            btn2: function (index,layero)
                            {
                                checkStatus(0,obj);
                                obj.value=0;
                            },
                            cancel: function(index, layero){
                                checkStatus(0,obj);
                            }
                        });

                        layer.title("<font color=red>活跃度设置</font>",index)

                    }
                });

               //搜索
                $("#topic_search").click(function (){
                    //表格重载实现搜索功能
                    //上述方法等价于
                    table.reload('topic',
                        {
                            url: 'topic/get_target_topic',
                            method:'post'
                            ,where:
                                {
                                    topic_name : $("#topic_content").val(),
                                    token: window.localStorage.managerToken
                                }
                            ,page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }); //只重载数据
                })


            });




        </script>
    </body>
</html>
